<template>
    <el-container id="collectorContainer" v-show="visible">
        <el-main>
            名称：
            <el-input v-model="markName" ref="nameinput"></el-input>
            <br />描述：
            <el-input v-model="markRemark" type="textarea"></el-input>
        </el-main>

        <el-footer>
            <el-button type="danger" id="cancelbtn" plain @click="cancelMark">删除</el-button>
            <el-button type="primary" plain id="submitbtn" @click="update">确定</el-button>
        </el-footer>
    </el-container>
</template>

<script>
import Collector from "../../plugins/task/Collector";
import TaskManager from "../../plugins/task/TaskManager";

export default {
    name: "CollectorComponent.vue",
    data() {
        return {
            visible: false,
            selectPanel: false,
            markName: "",
            markRemark: "",
            position:''
        };
    },
    mounted() {
        let that = this;
        this.$nextTick().then(function () {
            Collector.instance().init()
        });
        window.addEventListener("EVENT_COLLECTOR_PICKED", e => {
            that.visible = true;
            that.position = e.detail.position;
        });

    },
    methods: {
        cancelMark() {
            //alert('删除');
            Collector.instance().clear();
            this.visible = false;
        },
        update() {
            TaskManager.instance().addMarker({
                position:this.position,
                name:this.markName,
                description:this.markRemark
            });
            Collector.instance().clear();
            this.visible = false;
        }
    }
};
</script>

<style scoped>
#collectorContainer {
    position: fixed;
    z-index: 2;
    background-color: #171e26;
    color: white;
    right: 50px;
    top: 200px;
    width: 380px;
}
</style>
